<template>
    <div class="app-container">
                <!-- 上部的form表单 -->
        <div class="top-form" style="text-align: center;">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="班级名 ">
                    <el-input v-model="queryForm.classesName" placeholder="请输入班级名"
                    :clearable="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round  icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round  icon="el-icon-plus" @click="handleAdd">新增</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 90px;">
                    <el-button type="danger" round  icon="el-icon-delete" @click="handleDel">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
                <!-- 表格展示数据 -->
        <div class="main">
            <el-table
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                :data="tblData"
                border
                style="width: 100%">
                <el-table-column  type="selection" width="55"> </el-table-column>
                <el-table-column align="center" label="序号" type="index" width="150"></el-table-column>
                <el-table-column align="center" prop="classesName" label="班级名" width="200px"> </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间" width="200px"> </el-table-column>
                <el-table-column align="center" prop="username" label="创建人" width="200px"> </el-table-column>
                <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="textAlign:center;margin-top: 20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageIndex"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="queryForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 弹窗设置 -->
        <div>
            <el-dialog title="班级设置" :visible="dialogVisible" width="50%" :before-close="handleClose">
                <el-form :model="formData" ref="formData"   :rules="rules">
                    <el-form-item label="班级名称" required prop="classesName">
                        <el-input v-model="formData.classesName" placeholder="输入班级名" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center;">
                        <el-button type="primary" @click="addClasses" style="margin-right: 30px;">确认操作</el-button>
                        <el-button type="info" @click="quitClasses">取消操作</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {pageList,selectById,edit,delBatch} from '@/api/classes/classes'
export default {
    name:"ClassesIndex",
    data(){
        return{
            queryForm:{
                classesName:'',
                pageIndex:1,
                pageSize:10
            },
            tblData:[],
            total: 0,
            multipleSelection: [],
            //弹窗设置
            dialogVisible:false,
            formData:{
                id:null,
                classesName:'',
            },
            // 新增试卷的验证规则
            rules:{
                classesName:[{required:true,message:'请输入班级名称',trigger:'blur'}]
            }
        }
    },
    mounted(){
        this.search();
    },
    methods:{
        async search(){
            console.log(this.queryForm);
            let res = await pageList(this.queryForm);
            this.tblData = res.data.records;
        },
        handleDel(row){
            let arr = [];
            if(row.id){
                arr.push(row.id);
                this.deleteByIds(arr);
            }else{
                this.deleteByIds(this.multipleSelection);
                this.multipleSelection = [];
            }
        },
        deleteByIds(val){
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                delBatch(val).then(resp=>{
                    if(resp.code == 200){
                        this.$message({
                            type: 'success',
                            message: resp.message
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: resp.message
                        });
                    }
                    this.search()
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 分页相关
        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryForm.pageIndex = val;
            this.search();
        },
        handleSelectionChange(val){
            val.forEach(element => {
                this.multipleSelection.push(element.id) 
            });
        },
        handleClose(){
            this.resetForm();
            this.dialogVisible = false;
        },
        handleAdd(){
            this.dialogVisible = true;
        },
        addClasses(){
            edit(this.formData).then(resp=>{
                if(resp.code == 200){
                    this.$message.success(resp.message);
                }
            }).catch(error=>{
                this.$message.error("NETWORK_ERROR")
            }).finally(()=>{
                this.handleClose();
                this.search();
            })
        },
        quitClasses(){
            this.handleClose();
        },
        resetForm(){
            this.formData.id = null;
            this.formData.classesName = '';
        },
        handleEdit(row){
            this.dialogVisible = true;
            selectById(row.id).then(resp =>{
                this.formData = resp.data;
            })
        }
    }
}
</script>

<style scoped>

</style>